<template>
  <div>
    <h1 v-color="'red'">{{ name }}--{{ ary }}--{{ count }}</h1>
    <button @click="fn">+++</button>
    <!-- <Child :data='ary' @qqq='f2' ref='qq' /> -->
    <MyInput v-model='name' v-for='item in ary' :ref='qqq' />
    <!-- vue2 :value  + @input -->
    <!-- vue3 :modelValue  + @update:modelValue -->
    <Child2 v-model:count='count' />
    <!-- v-model:count='count' 等价于 vue2 的 :count.sync='count' -->
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
import Child2 from '@/components/Child2.vue'
import MyInput from './components/Input'

export default {
  name: 'App',
  components: {
    Child, MyInput, Child2
  },
  data() {
    return {
      name: "珠峰",
      count: 100,
      obj: { a: 1 },
      ary: [1, 2, 3, 4],
      inputs: []
    }
  },
  computed: {
    // count() { },
    // count2() { }
  },
  mounted() {
    console.log(this.inputs)
  },
  methods: {
    qqq(instance) {
      this.inputs.push(instance)
    },
    f2(arr) {
      this.ary = arr
    },
    fn() {
      // this.obj.b = 666
      this.ary[0] = 1000
      console.log(this.$refs.qq.age = 999999)
    }
  },
  created() {
    console.log(this.$http)
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
